<template>
  <div class="">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="true" title="我的评价" />
    <div class="tab">
      <div
        class="tab_item"
        @click="handleChangeTab(index)"
        :class="{active: tabActiveIndex === index}"
        v-for="(item, index) in tabList"
        :key="index"
      >{{item}}</div>
    </div>
    <div class="none" v-if="lawerList.length == 0">
      <image class="none-img" :src="imgBaseUrl + 'none.png'" mode="widthFix" />
    </div>
    <div class="comment">
      <div class="item" v-for="item in lawerList" :key="item.id">
        <div class="info">
          <image class="avatar" :src="item.lawyer.avatar"></image>
          <div class="lawer">
            <div class="top">
              <div class="name">{{item.lawyer.reply_realname}}</div>
              <div class="type-name">
                <text v-if="item.consultation_type == 1">在线咨询</text>
                <text v-else-if="item.consultation_type == 2">电话咨询</text>
                <text v-else-if="item.consultation_type == 3">合同起草</text>
                <text v-else-if="item.consultation_type == 4">律师函</text>
              </div>
            </div>
            <div class="bottom">
              <div class="company">{{item.lawyer.affiliated_company}}</div>
            </div>
          </div>
        </div>
        <div class="rate">
          <!-- 评分组件 -->
          <uni-rate :disabled="true" :value="item.score" size="15" active-color="#fea388" margin="5"></uni-rate>
        </div>
        <div class="user-comment">{{item.score_content}}</div>
        <div class="hybrid">
          <div class="tag">
            <div class="tag-item" v-for="(tag, tagIndex) in item.label" :key="tagIndex">{{tag}}</div>
          </div>
          <div class="time">{{item.score_time}}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lawerList: [],
      page: 1,
      length: 0,
      tabActiveIndex: 0,
      imgBaseUrl: this.$store.state.imgBaseUrl,
      tabList: ['公开咨询', '付费咨询'],
    };
  },
  onShow(){
    this.init()
  },
  onReachBottom(){
    if (this.length < 20) return;
    this.page++;
    this.init(this.page);
  },
  methods: {
    handleChangeTab(index){
      this.tabActiveIndex = index
      this.lawerList = []
      this.page = 1
      this.init()
    },
    async init(page = 1){
      const res = await this.$gh.request('member.info',{
        data:{
          op: 'getEvaluate',
          page,
          service_type: this.tabActiveIndex,
          psize: 20
        }
      }).catch((err) => {
        if(err.code == 41009){
          this.$store.dispatch('login')
        }
      })
      const {list} = res.data
      this.lawerList = this.lawerList.concat(list)
      this.length = list.length
    }
  },
};
</script>
<style lang='less' scoped>
@import url("../../common/util.less");
.tab {
  .gh-around();
  width: 70%;
  margin: 25rpx auto;
  font-size: 30rpx;
  color: @font-color;
  .tab_item {
    width: 30%;
    margin-right: 5%;
    text-align: center;
    &:last-child {
      margin-right: 0;
    }
  }
  .active {
    font-size: 36rpx;
    color: @deep-color;
  }
}
.none {
  font-size: 30rpx;
  color: @font-color;
  text-align: center;
  .none-img{
    width: 50%;
    margin-top: 100rpx;
  }
}
.comment {
  padding: 25rpx 25rpx 0;
  .item {
    padding: 25rpx;
    background-color: #fff;
    border-radius: 30rpx;
    margin-bottom: 25rpx;
    box-shadow: @shadow;
    .info {
      .flex();
      .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 10rpx;
      }

      .lawer {
        flex: 1;
        .top {
          .gh-between();
          padding-bottom: 10rpx;
          .name {
            font-size: 30rpx;
            color: @deep-color;
          }
          .type-name{
            padding: 8rpx 14rpx;
            border-radius: 25rpx;
            background-color: @font-color;
            font-size: 24rpx;
            color: #fff;
          }
        }

        .bottom {
          .gh-between();
          .company {
            font-size: 24rpx;
            color: @font-color;
          }
        }
      }
    }
    .rate{
      padding: 30rpx 0 20rpx;
    }
    .user-comment{
      font-size: 30rpx;
      color: @deep-color;
    }
    .hybrid{
      .gh-between();
      font-size: 24rpx;
      color: @font-color;
      margin-top: 30rpx;
      .tag{
        .flex();
        .tag-item{
          padding: 5rpx 10rpx;
          border: 1px solid @font-color;
          margin-right: 5rpx;
        }
      }
    }
  }
}
</style>